import { OpenShareModalButton } from '@/features/Share';
import cs from '@/pagesComponents/Article/Article.module.scss';
import { Loader } from '@/shared/ui';

const Slice = () => (
  <div className={cs.slice}>
    <Loader borderRadius={6} height={20} />
    <Loader borderRadius={6} height={20} />
    <Loader borderRadius={6} height={20} />
    <Loader borderRadius={6} height={20} />
    <Loader borderRadius={6} height={20} width={320} />
  </div>
);

export const ArticlePageLoader = () => (
  <div className={cs.container}>
    <div className={cs.article}>
      <div className={cs.description}>
        <div className={cs.title}>
          <div className={cs.slice}>
            <Loader borderRadius={12} height={42} width={848} />
            <Loader borderRadius={12} height={42} width={320} />
          </div>
          <div className={cs.actions}>
            <OpenShareModalButton variant="icon" />
          </div>
        </div>
        <Loader borderRadius={6} height={20} width={112} />
      </div>
      <Loader borderRadius={32} height={604} width={1144} />
      <Slice />
      <Slice />
      <Slice />
    </div>
  </div>
);
